<template>
  <el-form inline size="small">
    <el-form-item>
      <el-date-picker
        v-model="seatStore.historyView.queryConfig.dateRange"
        type="daterange"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        range-separator="至"
        start-placeholder="起始日期"
        end-placeholder="截止日期"
        :clearable="false"
        size="small"
        style="width: 240px; max-width: 240px; margin-right: 12px"
      />
    </el-form-item>
    <el-form-item>
      <el-checkbox-button
        v-model="seatStore.historyView.queryConfig.ignoreShort"
        size="small"
        label="忽略10分钟内变更"
      />
    </el-form-item>
    <el-form-item>
      <el-radio-group v-model="seatStore.historyView.summaryConfig.stepMinutes">
        <el-radio-button
          v-for="item in stepMinutesOptions"
          :value="item.value"
          :label="item.label"
          :key="item.label"
        />
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-radio-group v-model="seatStore.historyView.summaryConfig.valueType">
        <el-radio-button
          v-for="item in valueTypeOptions"
          :value="item.value"
          :label="item.label"
          :key="item.label"
        />
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="handleQuery">
        <el-icon>
          <Search />
        </el-icon>
        <span>查询</span>
      </el-button>

      <el-button
        :type="count ? 'success' : 'info'"
        size="small"
        @click="ExportXLSX"
        :disabled="!count"
      >
        <el-icon>
          <Download />
        </el-icon>
        <span>导出</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import axios from "axios";
import dayjs from "dayjs";
import useSeatStore from "@/store/seat.js";
import ExportXLSX from "./ExportXLSX.js";
import { ElLoading, ElMessage, ElNotification } from "element-plus";

const seatStore = useSeatStore();

const count = computed(() =>
  !seatStore.historyView.queryResult ||
  seatStore.historyView.queryResult.length == 0
    ? 0
    : seatStore.historyView.queryResult.length
);

const handleQuery = () => {
  // const loadingInstance = ElLoading.service({ fullscreen: true });
  seatStore.historyView.queryResult = [];
  seatStore.historyView.isLoading = true;
  return new Promise((resolve, reject) => {
    axios
      .post("api/seat_sector_record.php", {
        startTime: seatStore.historyView.queryConfig.dateRange[0] + " 00:00:00",
        endTime:
          dayjs(seatStore.historyView.queryConfig.dateRange[1])
            .add(1, "day")
            .format("YYYY-MM-DD") + " 04:00:00",
      })
      .then((response) => {
        if (response.data.success) {
          seatStore.historyView.queryResult = response.data.content;
          ElNotification({
            type: "success",
            title: "查询成功",
            message: `共 ${count.value} 条记录`,
          });
          resolve(response.data);
        } else {
          reject(response);
        }
      })
      .catch((error) => {
        reject(error);
      })
      .finally(() => {
        setTimeout(() => {
          seatStore.historyView.isLoading = false;
          // loadingInstance.close();
        }, 500);
      });
  });
};

const stepMinutesOptions = ref([
  {
    label: "15分钟",
    value: 15,
  },
  {
    label: "30分钟",
    value: 30,
  },
  {
    label: "60分钟",
    value: 60,
  },
]);

const valueTypeOptions = ref([
  {
    label: "最大值",
    value: "max",
  },
  {
    label: "最小值",
    value: "min",
  },
  {
    label: "平均值",
    value: "avg",
  },
  {
    label: "加权值",
    value: "weighted",
  },
]);
</script>
